// 轮播引用
var mySwiper = new Swiper('.swiper', {
    direction: "horizontal", //横向切换
    loop: true, // 循环模式选项
    autoplay: true, //可选选项，自动滑动,等同于以下设置
    /*autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: true,
      },*/
    // 分页器
    pagination: {
        el: '.swiper-pagination',
    },
    //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状.
    grabCursor: true,
    //前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    //切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间
    speed: 300,
    autoplay: {
        delay: 2000
    },
})

/**商品详情
 * 2. 根据id调用商品详情接口获取商品详情数据
 */
function getProductList(pageNo) {
    let startNum = pageNo * 20 //起始序号 
    $.ajax({
        url: 'http://www.xiongmaoyouxuan.com/api/tab/1/feeds?start=' + startNum,
        type: 'get',
        success: function (res) {
            showProductList(res.data.list)
        },
        error: function (error) {
            alert('网络请求商品列表失败 ' + error)
        }

    })
}
/*
  渲染商品列表
*/
// let listStr = '' //所有商品列表元素
let listAll = []

function showProductList(productList) {
    listAll = [...listAll, ...productList]
    let arr = listAll.map(item => {
        return `
            <div class="item" onclick="onDetail(${item.id})">
                <div><img src="${item.image}"  alt=""></div>
                <h2 class="title">${item.title}</h2>
                <p class="price"><span>￥</span>${item.price}</p>
                <p class="saleNum">${item.saleNum}人已购买</p>
                <button class="coupon"> ${item.couponValue}</button>

            </div>
        `
    })
    let str = arr.join('')
    $('.productList').html(str)
}

/* 
 详情事件
*/
function onDetail(id) {
    location.href = './detail.html?id=' + id
}

function onInit() {
    let pageNo = 1 //页号
    getProductList(pageNo)

    //加载更多
    $('.more-btn').click(function () {
        getProductList(++pageNo)
    })
}

//入口
onInit()
// 回到顶部
let topEle = document.querySelector(".return-top")
topEle.onclick = function () {
    //alert(11);
    timer = setInterval(function () {
        // 距离顶部高度
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        // 速度
        let ispeed = Math.floor(-scrollTop / 1);
        if (scrollTop == 0) {
            clearInterval(timer);
        }
        document.documentElement.scrollTop = document.body.scrollTop = scrollTop + ispeed;
    }, 30)
};
// 导航横向tab选项卡
function tabOnNav() {
    $(".nav>.normal>ul>li").mouseover(function () {
        $(".nav>.normal>ul>li").removeClass("active")
        $(this).addClass("active")
    })
    $(".nav>.normal>ul>li").mouseout(function () {
        $(".nav>.normal>ul>li").removeClass("active")
    })
}
tabOnNav()
// 首页详情tab选项卡
function tabOnDidden() {
    $(".tab-show>.classification>ul>li").mouseover(function () {
        $(".tab-show>.classification>ul>li").removeClass("active")
        $(this).addClass("active")
        $(".tab-hidden>div").addClass("on")
        let index = $(this).index()
        if (index == 0) {
            getTabData(2)
            getTabData(13)
        } else if (index == 1) {
            getTabData(5)
            getTabData(19)
        } else if (index == 2) {
            getTabData(3)
            getTabData(3)


        } else if (index == 3) {
            getTabData(4)
            getTabData(14)
        } else if (index == 4) {
            getTabData(10)

        } else if (index == 5) {
            getTabData(24)

        } else if (index == 6) {
            getTabData(6)
            getTabData(12)
        } else if (index == 7) {
            getTabData(16)

        } else if (index == 8) {
            getTabData(11)
            getTabData(7)
        }

    })


    $(".tab-show>.classification>ul>li").mouseout(function () {
        $(".tab-show>.classification>ul>li").removeClass("active")
        $(".tab-hidden>div").removeClass("on")
    })
}
tabOnDidden()

// 移入请求数据
function getTabData(id) {
    $.ajax({
        url: 'http://www.xiongmaoyouxuan.com/api/tab/' + id + '?start=0',
        type: 'get',
        success: function (res) {
            showTabData(res.data, res.data.categories)
            // console.log(data.category.cname);
        },
        error: function (error) {
            alert('网络请求商品列表失败 ' + error)
        }

    })
}
/*data
  渲染tab选项卡列表
*/
function showTabData(data, product) {
    let str = `
        <div>
            <h2 class="name">${data.category.cname}</h2>
            `
    let Str = product.map(item => {
        return `
        <span><a href="">${item.title}</a></span>
        `
    }).join('')
    str += Str
    $('.tab-hidden>div').html(str)
}



// 搜索功能查找商品
